<template>

    <el-container class="home-container">
  <el-header>
    <div>
      <img class="img1" src="http://cdn.k1998.xyz/me.jpg" alt="">
      <span>后台管理系统</span>
    </div>
    
   
  </el-header>
    <!-- 主 -->
  <el-container>
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px' ">  
      <div class="toogle-button" @click="toogleCollapse">
        ||||
      </div>
      <!-- 侧边栏菜单区域 -->
      



    </el-aside>
      <!-- 右边 -->
    <el-main>
      <router-view></router-view>

    </el-main>
  </el-container>
</el-container>

 
</template>

<script>
export default {
data(){
  return{
    menulist:[],
    iconsObj:{
    '125':'el-icon-user-solid',
    '103':'el-icon-star-on',
    '101':'el-icon-s-shop',
    '102':'el-icon-loading',
    '145':'el-icon-s-marketing' 
    },
    isCollapse:false
    
  }

},

created(){
 
},

methods:{
 
 
  toogleCollapse(){
        this.isCollapse = !this.isCollapse
  }
}
}
</script>


<style scoped>

.home-container{
  height: 100%;
}

.el-header{
 background-color:  skyblue;
 display: flex;
 justify-content: space-between;
 padding-left: 0;
 align-items: center;
 color: #fff;
 font-size: 20px;
}
.el-header>div{
    display: flex;
    align-items: center;
}
.el-header>div>span{
  margin-left: 15px;
}




.el-aside{
 background-color: #545c64;
}
.el-aside .el-menu{
  border-right: none;
}


.el-main{
   background-color: #eaedf1;
}

.img1{
  width: 50px;
}

.toogle-button{
  background-color: #ffffff;
  font-size: 10px;
  line-height: 24px;
  color: #000;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

</style>>

